<template>
  <div class="custom-search">
    <h4>
      {{$t('business.serviceManage')}}
    </h4>
    <div class="prompt">
      {{$t('business.serviceManagePrompt')}}
    </div>
    <el-form ref="form" :model="form" size="mini" class="clearBoth">
      <div class="flex" size="mini">
        <el-form-item :label="$t('business.businessNumber')" prop="number">
          <el-input v-model.trim="form.number"></el-input>
        </el-form-item>
        <el-form-item :label="$t('business.businessConfigType')" prop="type">
          <el-select  v-model.trim="form.type" >
            <el-option
              value=""
              :label="$t('public.all')">
            </el-option>
            <el-option
              v-for="item in states"
              :key="item.value"
              :value="item.value"
              :label="item.label">

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.submitTime')" prop="createTime">
          <el-date-picker
            v-model.trim="form.createTime"
            :id="['businessServiceTime1', 'businessServiceTime2']"
            :editable="false"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width:400px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('business.businessClose')" prop="status">
          <el-radio-group v-model.trim="form.status">
            <el-radio size="mini" label="finish">{{$t('public.yes')}}</el-radio>
            <el-radio size="mini" label="dealing">{{$t('public.no')}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item class="fr">
        <el-button class="primary_btn" @click.stop="reset">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="primary_btn" @click.stop="search('search')">{{$t('public.search2')}}</el-button>
      </el-form-item>
    </el-form>
    <affix :label="$t('business.serviceList')">
      <common-table :tableHead="tableHead" :data="tableData" :limit="10" :pagination="pagination" @operate="operate" @turnPage="search">
      </common-table>
    </affix>
    <div :class="dialogShow ? 'layout-qua-bus' : 'layin-qua-bus'" class="business-qua-dialog">
      <h2 class="title">{{$t('business.viewBusiness')}}
        <div v-show="dialogShow" class="close fr" @click="closeWindow"><i class="el-icon-close"></i></div>
      </h2>
      <div class="scroll">
        <affix :label="$t('business.businessInfo')">
          <table class="once-step" border="0" cellspacing="0">
            <tbody valign="top">
              <tr class="data-item">
                <td class="data-name">{{$t('business.businessStatus')}}</td>
                <td class="break-all" :class="currentBusiness.status">{{currentBusiness.status === 'dealing' ? $t('business.dealing'): $t('business.complete')}}</td>
              </tr>
              <tr class="data-item">
                <td class="data-name">{{$t('business.businessNumber')}}</td>
                <td class="break-all">{{currentBusiness.number}}</td>
              </tr>
              <tr class="data-item">
                <td class="data-name">{{$t('business.businessConfigType')}}</td>
                <td class="break-all">{{currentBusiness.configType}}</td>
              </tr>
              <tr class="data-item">
                <td class="data-name">{{$t('business.businessConfigMessage')}}</td>
                <td class="break-all">{{currentBusiness.configMessage}}</td>
              </tr>
              <tr class="data-item">
                <td class="data-name">{{$t('business.linker')}}</td>
                <td class="break-all">{{currentBusiness.linker}}</td>
              </tr>
              <tr class="data-item">
                <td class="data-name">{{$t('business.linkerPhone')}}</td>
                <td class="break-all">{{currentBusiness.linkerphone}}</td>
              </tr>
              <tr class="data-item">
                <td class="data-name">{{$t('public.attach')}}</td>
                <td class="break-all">
                  <div v-for="item in currentBusiness.attach">
                    <a :href="item.url" download target="_blank">{{item.name}}</a>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </affix>
        <history :item="currentBusiness" type="out"></history>
        <comment  ref="comment" :business="currentBusiness" v-on:event="businessEvent" :isServiceBusiness="false" v-show="currentBusiness.status === 'dealing'" :commentStyle="{commitBtn: $t('business.reply'), showIcon: false}"></comment>
      </div>
    </div>
  </div>
</template>
<script>
  import CommonTable from '../config/robotConfig/base/CommonTable.vue'
  import Affix from '../../ui-modules/affix/Affix'
  import History from '@/components/public-modules/cust-tab-content/business/History'
  import Comment from '@/components/public-modules/cust-tab-content/business/businessComment'
  import {serviceBusinessType} from '@/utils/workflowUtils'
  import { common } from '@/utils/cosUrl'
  import {deepClone, removeEmptyProperty} from '@/utils/m7Utils'
  export default {
    name: 'ExportTask',
    data () {
      return {
        dialogShow: false,
        currentBusiness: {
        },
        pagination: {
          currentPage: 0,
          count: 0,
          totalPage: 0
        },
        states: serviceBusinessType,
        form: {
          number: '',
          createTime: [],
          type: '',
          status: ''
        },
        searchObj: {
          page: 1,
          limit: 10,
          condition: {}
        },
        tableData: [],
        tableHead: [
          {prop: 'number', label: this.$t('business.businessNumber'), special: 'badge'},
          {prop: 'configMessage', label: this.$t('business.businessConfigMessage'), tooltip: true},
          {prop: 'configType', label: this.$t('business.businessConfigType')},
          {prop: 'exten', label: this.$t('business.submitAgent')},
          {prop: 'statusName', label: this.$t('business.status'), special: 'status'},
          {prop: 'createTimeStamp', label: this.$t('business.submitTime')},
          {prop: 'operate', label: this.$t('public.operate'), special: 'operate', operate: [{name: this.$t('business.view'), type: 'view'}, {name: this.$t('public.delete'), type: 'delete'}]}
        ]
      }
    },
    components: {
      CommonTable,
      Affix,
      History,
      Comment
    },
    computed: {
      noticeBusJump () {
        // 小铃铛通知
        return this.$store.state.noticeBusJump.random
      }
    },
    watch: {
      noticeBusJump () {
        let data = this.$store.state.noticeBusJump
        if (data.module === 'configBusiness') {
          this.closeWindow()
          let query = this.$route.query
          this.form.createTime = []
          this.form = {
            number: query.busNumber,
            createTime: [],
            type: '',
            status: ''
          }
          this.search('search')
        }
      }
    },
    methods: {
      reset () {
        this.$refs.form.resetFields()
      },
      businessEvent (data) {
        let form = data.data.form
        if (!form.backInfo) {
          this.$message.error(this.$t('business.replyRequire'))
          return
        }
        form = Object.assign({history_type: 'receive'}, form)
        form._id = this.currentBusiness.businessId
        this.$store.dispatch('addConfigBusinessBackInfo', form).then((res) => {
          if (res.success) {
            this.view({_id: this.currentBusiness._id})
          }
        })
      },
      closeWindow () {
        this.dialogShow = false
      },
      operate (event) {
        let type = event.type
        let data = event.val
        if (type === 'delete') {
          this.delete({_id: data._id})
        } else if (type === 'view') {
          this.view({_id: data._id})
        }
      },
      view (data) {
        this.dialogShow = true
        this.currentBusiness = {attach: []}
        this.$store.dispatch('queryConfigBusinessById', data).then((res) => {
          if (res && res.success) {
            this.tableData.some((item, index) => {
              if (item._id === data._id) {
                item.isRead = true
                this.$set(this.tableData, index, item)
                return true
              }
            })
            res.data.attach = res.data.attach || []
            res.data.attach.forEach((item) => {
              item.url = common.getUrl(item, { useAttname:true})
            })
            this.currentBusiness = res.data
            this.$nextTick(() => {
              if (res.data.status === 'dealing') {
                this.$refs.comment.showRemarkDiv(true)
              }
            })
          } else {
            this.dialogShow = false
          }
        })
      },
      delete (data) {
        this.$confirm(this.$t('business.businessDeleteTip'), this.$t('public.delete'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        })
          .then(() => {
            this.$store.dispatch('removeCnofigBusiness', data)
              .then(resp => {
                if (resp.success) {
                  this.search()
                  this.$message({
                    type: 'success',
                    message: this.$t('message.deleteSucc')
                  })
                }
              })
          })
      },
      search (page) {
        if (typeof page === 'number') {
          // 翻页
          this.searchObj.page = page
        } else if (page === 'search') {
          // 查询
          this.searchObj.page = 1
          // let [beginTime, endTime] = this.form.createTime || []
          // this.searchObj.beginTime = beginTime || ''
          // this.searchObj.endTime = endTime || ''
          let condition = deepClone(this.form)
          removeEmptyProperty(condition)
          this.searchObj.condition = condition
        }
        this.$store.dispatch('queryConfigBusiness', this.searchObj).then((res) => {
          this.tableData = []
          if (res.success) {
            this.pagination.count = res.count
            this.pagination.currentPage = this.searchObj.page
            let list = res.data || []
            for (let i = 0; i < list.length; i++) {
              let one = list[i]
              if (one.status === 'finish') {

              }
              one.statusName = one.status === 'finish' ? this.$t('business.complete1') : this.$t('business.dealing')
            }
            this.tableData = list
          }
        })
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'agents'}).then(() => {
        let query = this.$route.query
        if (query) {
          this.form.number = query.busNumber
        }
        this.search('search')
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .custom-search
    height calc(100vh - 54px)
    overflow auto
    padding 15px 20px
    background-color #fff
    position relative
    h4
      padding 10px 0
      font-size 16px
      border-bottom 1px solid $c-border2
  .refresh
    color $c-main
    display inline-block
    padding-left 10px
    cursor pointer
  .table-wrap
    padding 10px 20px
  .flex
    display flex
    padding-top 20px
    &>div
      padding-right 40px
  .prompt
    color $c-prompt
    line-height 2
    font-size 12px
    padding-top 10px
  .layout-qua-bus
    width 1000px
    background-color #fff
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout-bus .4s
    @keyframes movelayout-bus
      0%
        width 0px
      100%
        width 1000px
  .layin-qua-bus
    width:0px
    display none
    transition transform 0.35s
  .business-qua-dialog
    height calc(100vh - 54px)
    position fixed
    right 0
    top 54px
    z-index 1
    box-sizing border-box
    padding 15px 20px
    .title
      line-height 20px
      padding-bottom 10px
      margin-bottom 20px
      border-bottom 1px solid $c-border2
    .close
      font-size 16px
      /*background-color #f2f2f2*/
      cursor pointer
    .scroll
      height calc(100% - 55px)
      overflow-y auto
  .dealing
    color $cf-color2
  .data-item
    line-height 22px
  .data-padding
    padding-top 20px
  .data-name
    padding-right 30px
    color $cf-gray4
    min-width 50px
  .break-all
    color $cf-gray2
    word-break break-all
    white-space pre-line
  .line
    width 100%
    border-top 1px solid $c-border2
</style>
